<template>
	<view class="flex-col homepage">
		<view class="u-line-1 text">请认真填写就诊人信息</view>
		<view class="wrapper">

			<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">

				<u-form-item label="关系" prop="relotion" borderBottom @click="showRelation = true;"
					ref="item1">
					<u--input v-model="form.relation" disabled  placeholder="请选择与本人的关系" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="姓名" prop="name" borderBottom ref="item1">
					<u--input v-model="form.name" border="none" placeholder="请输入真实姓名"></u--input>
				</u-form-item>
				
				<u-form-item label="出生日期"  labelWidth="80"  prop="birthday" borderBottom ref="item1">
					<picker mode="date" :value="form.birthday" @change="bindDateChange">
						<u--input v-model="form.birthday" border="none" placeholder="请输入出生日期"></u--input>
					</picker>
				</u-form-item>
				
				<radio-group name="sex" @change="radioChange">
					<label>性别：</label>
					<label>
						<radio value="男" checked="checked" /><text>男</text>
						<radio value="女" /><text>女</text>
					</label>
				</radio-group>
				
				<u-form-item label="证件类型" labelWidth="80" prop="documentType" borderBottom @click="showType = true;"
					ref="item1">
					<u--input v-model="form.documentType" disabled  placeholder="请选择证件类型" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item label="证件号码" labelWidth="80" prop="number" borderBottom ref="item1">
					<u--input v-model="form.number" border="none" placeholder="请输入证件号码"></u--input>
				</u-form-item>
				
				<u-form-item label="手机号码" labelWidth="80" prop="phone" borderBottom ref="item1">
					<u--input v-model="form.phone" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>
				
				<u-form-item label="就诊人地址" labelWidth="80" prop="address" borderBottom ref="item1">
					<u--input v-model="form.address" border="none" placeholder="选填"></u--input>
				</u-form-item>
				
				<u-form-item label="设置为默认就诊人" labelWidth="125"  prop="defaultPerson" borderBottom ref="item1">
					<u-switch class="switch" style="position: absolute; right: 80rpx;" v-model="isopen" size="20"></u-switch>
				</u-form-item>
				
			</u--form>

			<!-- 关系下拉框 -->
			<u-action-sheet :show="showRelation" :actions="relation" title="请选择与本人的关系" @close="showRelation = false" @select="relationSelect">
			</u-action-sheet>
			
			<!-- 证件类型下拉框 -->
			<u-action-sheet :show="showType" :actions="type" title="选择证件类型" @close="showType = false" @select="typeSelect">
			</u-action-sheet>

		</view>
		<view class="flex-row wrapper-two">
			<view class="u-line-3 text-two">初次添加就诊人请绑定本院就诊卡号，未持有本院就诊卡的患者需到本院自助机或窗口办理就诊卡后方可进行添加。</view>
		</view>
		
		<u-button @click="saveByUpdate" class="button">
			保存
		</u-button>
		
		<u-button @click="patientDelById" v-if="isById" class="button">
			删除就诊人
		</u-button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				mode: 'single',
				isopen:false,
				showRelation: false,
				showType:false,
				isById:false,
				URL:'http://localhost:9000/',//主域名
				userId:'',
				id:'',
				form: {
					name: '',
					relation: '',
					documentType:'',
					number:'',
					hospitalNumber:'',
					phone:'',
					address:'',
					defaultPerson:'',
					userId:'',
					birthday:'',
				},
				relation: [{
						name: '本人',
					},
					{
						name: '子女',
					},
					{
						name: '夫妻',
					},
					{
						name: '父母',
					},
					{
						name: '朋友',
					},
				],
				type: [{
						name: '身份证',
					},
					{
						name: '护照',
					},
					{
						name: '港澳通行证',
					},
				],
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名'
						}],
						validateTrigger: 'submit'
					},
				}
			}
		},
		methods: {
			
			//处理日期选择组件的日期数据
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//选择日期，获取选择结果
			bindDateChange: function(e) {
				this.form.birthday = e.detail.value
				console.log(this.form.birthday)
			},
			
			//单选框（获取性别）		
			radioChange(evt) {
				console.log(evt.detail.value)
				this.form.sex=evt.detail.value
			},
			
			//删除就诊人
			patientDelById(){
				console.log(this.id)
				uni.request({
					url:this.URL+"user/user/the-patient/patientDelById/"+this.id,
					method:"GET",
					success: (res) => {
						if (res.data.code == 20000){
							uni.showToast({
								icon: "none",
								title: '删除成功',
							})
							uni.navigateTo({
								url: "patient?id="+this.form.userId
							})
						}
					}
				})
			},
			
			//判断添加还是修改就诊人
			saveByUpdate(){
				console.log(this.id)
				if(this.id != ''){
					this.patientUpdateById()
				}else{
					this.save()
				}
			},
			
			//修改就诊人
			patientUpdateById(){
				uni.request({
					url:this.URL+"user/user/the-patient/patientUpdateById",
					method:"POST",
					data:this.form,
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							//注册成功提示信息
							uni.showToast({
								icon: "none",
								title: '修改就诊人成功',
							})
							//跳转页面
							uni.navigateTo({
								// url: "patient",
								url: "patient?id="+this.form.userId
							})
						}
					}
				})
			},
			
			//添加就诊人
			save(){
				if(this.isopen){
					this.form.defaultPerson = "是"
					console.log(this.form)
				}else{
					this.form.defaultPerson = "否"
					console.log(this.form)
				}
				if(this.form.sex == null){
					this.form.sex = '男'
				}
				uni.request({
					url:this.URL+"user/user/the-patient/patientSave",
					method:"POST",
					data:this.form,
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							//注册成功提示信息
							uni.showToast({
								icon: "none",
								title: '添加就诊人成功',
							})
							//跳转页面
							uni.navigateTo({
								// url: "patient",
								url: "patient?id="+this.form.userId
							})
						}
					}
				})
			},

			//获取选中的类型
			typeSelect(e){
				this.form.documentType = e.name
				console.log(this.form)
			},
			//获取选中的关系
			relationSelect(e) {
				this.form.relation = e.name
				console.log(this.form)
			},

		},
		onLoad(userId) {
			this.userId = userId
			this.form.userId = this.userId.userId
			if(userId.id != null){
				this.isById=true
				this.id = userId.id
				uni.request({
					url:this.URL+"user/user/the-patient/patientById/"+this.id,
					method:"GET",
					success: (res) => {
						console.log(res)
						if(res.data.code == 20000){
							this.form = res.data.data.patient
							if(this.form.defaultPerson === "是"){
								this.isopen = true
							}
							console.log(this.form)
						}
					}
				})
			}
			console.log(userId)
		}
	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		padding: 46rpx 35rpx 0rpx 35rpx;

		.text {
			width: 100%;
			height: 42rpx;
			margin-bottom: 40rpx;
			font-size: 32rpx;
			color: #bab3b5;
		}

		.wrapper {
			width: 678rpx;
			height: 1000rpx;
			margin-bottom: 56rpx;
			border-top-width: 2rpx;
			border-top-style: solid;
			border-bottom-width: 2rpx;
			border-bottom-style: solid;
		}

		.wrapper-two {
			width: 678rpx;
			justify-content: center;
			padding: 29rpx 0rpx;
			border-radius: 20rpx;
			background: #f7f7f8;

			.text-two {
				width: 650rpx;
				height: 114rpx;
				color: #c5bbc6;
			}
		}

		.button {
			width: 694rpx;
			height: 90rpx;
			display: block;
			margin-right: auto;
			margin-left: auto;
			font-size: 36rpx;
			background: #006eff;
			color: #ffffff;
		}
	}
</style>
